import React, { useState, useEffect } from 'react'
import { BrowserRouter as Router, Route, Routes, useNavigate, useLocation } from 'react-router-dom'
import SecondHandCss from './second.module.css'
import axios from 'axios'
import './style.css'
export default function SecondHand() {
	const navigate = useNavigate()
	const location = useLocation()
	const [s_name, setS_name] = useState('')
	const [s_type, setS_type] = useState('')
	const [second_type, setSecond_type] = useState([])
	const [second_list, setSecond_list] = useState([])
	const [type_ind, setType_ind] = useState(0)
	const [is_all, setIsall] = useState(false)
	const getsecond_type = () => {
		axios.get(`http://localhost:3000/secondType`).then(res => {
			let { code, data } = res.data
			if (code == 200) {
				setSecond_type(data)
			}
		})
	}
	const getsecond_List = () => {
		axios.get(`http://localhost:3000/homeAppliances?s_name=${s_name}&s_type=${s_type}`).then(res => {
			let { code, data } = res.data
			if (code == 200) {
				setSecond_list(data)
			}
		})
	}
	const search = (id, index) => {
		setS_type(id)
		setType_ind(index)
		getsecond_List()
	}
	useEffect(() => {
		getsecond_type()
		getsecond_List()
		window.addEventListener('resize', waterFall);
		return () => window.removeEventListener('resize', waterFall);
	}, [])
	const waterFall = () => {
		const gap = 10;
		if (second_list.length === 0) return;

		// 获取页面宽度和元素宽度
		const pageWidth = window.innerWidth;
		const itemWidth = document.querySelector('.item').offsetWidth;
		const columns = parseInt(pageWidth / (itemWidth + gap));
		const arr = []; // 存储每列的高度

		second_list.forEach((item, i) => {
			if (i < columns) {
				// 第一行
				item.top = 0;
				item.left = (itemWidth + gap) * i;
				arr.push(item.height);
			} else {
				// 其他行，找出最小高度列，和索引
				let minHeight = arr[0];
				let index = 0;
				for (let j = 0; j < arr.length; j++) {
					if (minHeight > arr[j]) {
						minHeight = arr[j];
						index = j;
					}
				}
				// 设置下一行的第一个盒子的位置
				item.top = arr[index] + gap;
				item.left = second_list[index].left;

				// 修改最小列的高度
				arr[index] = arr[index] + item.height + gap;
			}
		});

		setSecond_list([...second_list]); // 更新状态以重新渲染
	};
	return (
		<div>
			<nav className={SecondHandCss.main}>
				<div className={SecondHandCss.header}>
					<div className={SecondHandCss.headerone}>
						<span onClick={() => { navigate('/shouPage') }}>
							<svg t="1730188511702" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4245" width="20" height="20"><path d="M238.208798 504.759085c114.078175 125.190257 330.334497 341.639984 441.040878 454.927143L785.790178 856.32207c-36.308951-36.902468-343.031681-348.783685-344.618828-358.506117 62.496379-64.083527 246.805082-251.967662 324.579423-339.65784l-95.228875-93.844342L238.208798 504.759085z" fill="#272636" p-id="4246"></path></svg>
							&nbsp;&nbsp;<span style={{ fontSize: '3.5vh' }}>二手闲置</span>
						</span>
						<span><img src="/img/Secondtop.jpg" alt="" width='160px' /></span>
					</div>
					<div>
						<input type="text" value={s_name} onChange={(e) => { setS_name(e.target.value) }} onKeyDown={(e) => { if (e.key === 'Enter') { getsecond_List() } }} className={SecondHandCss.inp} placeholder='&nbsp;&nbsp;&nbsp;闲置搜索' />
					</div>
				</div>
				{/* <input type="color"/> */}
				<div className={SecondHandCss.tow}>
					<nav className={SecondHandCss.towone}>
						<div className={SecondHandCss.le} onClick={() => { navigate('/add_secondHand') }}>
							<svg t="1730199207423" className="icon" viewBox="0 0 1031 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2450" width="30" height="30"><path d="M46.509005 234.950666h938.198904c16.839468 0 30.471417 13.63195 30.471418 30.471417v712.068912c0 16.839468-13.63195 30.471417-30.471418 30.471417H46.509005c-16.839468 0-30.471417-13.63195-30.471417-30.471417V265.422083c0-16.839468 13.63195-30.471417 30.471417-30.471417z" fill="#7CB0F1" p-id="2451"></path><path d="M984.707909 1024H46.509005c-25.660141 0-46.509005-20.848865-46.509005-46.509005V265.422083c0-25.660141 20.848865-45.707126 46.509005-45.707126h938.198904c25.660141 0 46.509005 20.848865 46.509006 45.707126v712.068912c-0.801879 25.660141-21.650744 46.509005-46.509006 46.509005zM46.509005 250.988254c-8.018794 0-14.433829 6.415035-14.433829 13.63195v712.068911c0 8.018794 6.415035 14.433829 14.433829 14.433829h938.198904c8.018794 0 14.433829-6.415035 14.433829-14.433829V265.422083c0-8.018794-6.415035-13.63195-14.433829-13.63195H46.509005z" fill="" p-id="2452"></path><path d="M688.012529 16.037588H339.194988c-10.424432 0-19.245106 8.820673-19.245105 19.245106v199.667972h62.546593V76.178543h272.638998v158.772123h52.122161V35.282694c0-10.424432-8.820673-19.245106-19.245106-19.245106z" fill="#7CB0F1" p-id="2453"></path><path d="M707.257635 250.988254h-52.122161c-8.820673 0-16.037588-7.216915-16.037588-16.037588V92.216132h-240.563822v142.734534c0 8.820673-7.216915 16.037588-16.037588 16.037588h-62.546593c-8.820673 0-16.037588-7.216915-16.037589-16.037588V35.282694c0-19.245106 16.037588-35.282694 35.282694-35.282694h348.817541c19.245106 0 35.282694 16.037588 35.282694 35.282694v199.667972c0 8.820673-7.216915 16.037588-16.037588 16.037588z m-36.084573-32.075176h20.046985V35.282694c0-1.603759-1.603759-3.207518-4.009397-3.207518H339.194988c-1.603759 0-3.207518 1.603759-3.207517 3.207518v183.630384h30.471417V76.178543c0-8.820673 7.216915-16.037588 16.037588-16.037588h272.638998c8.820673 0 16.037588 7.216915 16.037588 16.037588v142.734535zM946.217698 960.651527H82.593579c-8.820673 0-16.037588-7.216915-16.037588-16.037588s7.216915-16.037588 16.037588-16.037588H946.217698c8.820673 0 16.037588 7.216915 16.037588 16.037588s-7.216915 16.037588-16.037588 16.037588z" fill="" p-id="2454"></path><path d="M156.366484 234.950666h102.640564v772.209866H156.366484z" fill="#4376B6" p-id="2455"></path><path d="M259.007048 1024H156.366484c-8.820673 0-16.037588-7.216915-16.037588-16.037588V234.950666c0-8.820673 7.216915-16.037588 16.037588-16.037588h102.640564c8.820673 0 16.037588 7.216915 16.037588 16.037588v772.209866c0 9.622553-7.216915 16.839468-16.037588 16.839468z m-86.602976-32.075176h70.565388V250.988254h-70.565388v740.93657z" fill="" p-id="2456"></path><path d="M765.794832 234.950666h102.640563v772.209866H765.794832z" fill="#4376B6" p-id="2457"></path><path d="M868.435395 1024H765.794832c-8.820673 0-16.037588-7.216915-16.037588-16.037588V234.950666c0-8.820673 7.216915-16.037588 16.037588-16.037588h102.640563c8.820673 0 16.037588 7.216915 16.037589 16.037588v772.209866c0 9.622553-7.216915 16.839468-16.037589 16.839468z m-86.602975-32.075176h70.565387V250.988254h-70.565387v740.93657z" fill="" p-id="2458"></path></svg>
							<span>二手出售</span>
						</div>
						<div className={SecondHandCss.ri}>
							<svg t="1730199207423" className="icon" viewBox="0 0 1031 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2450" width="30" height="30"><path d="M46.509005 234.950666h938.198904c16.839468 0 30.471417 13.63195 30.471418 30.471417v712.068912c0 16.839468-13.63195 30.471417-30.471418 30.471417H46.509005c-16.839468 0-30.471417-13.63195-30.471417-30.471417V265.422083c0-16.839468 13.63195-30.471417 30.471417-30.471417z" fill="#7CB0F1" p-id="2451"></path><path d="M984.707909 1024H46.509005c-25.660141 0-46.509005-20.848865-46.509005-46.509005V265.422083c0-25.660141 20.848865-45.707126 46.509005-45.707126h938.198904c25.660141 0 46.509005 20.848865 46.509006 45.707126v712.068912c-0.801879 25.660141-21.650744 46.509005-46.509006 46.509005zM46.509005 250.988254c-8.018794 0-14.433829 6.415035-14.433829 13.63195v712.068911c0 8.018794 6.415035 14.433829 14.433829 14.433829h938.198904c8.018794 0 14.433829-6.415035 14.433829-14.433829V265.422083c0-8.018794-6.415035-13.63195-14.433829-13.63195H46.509005z" fill="" p-id="2452"></path><path d="M688.012529 16.037588H339.194988c-10.424432 0-19.245106 8.820673-19.245105 19.245106v199.667972h62.546593V76.178543h272.638998v158.772123h52.122161V35.282694c0-10.424432-8.820673-19.245106-19.245106-19.245106z" fill="#7CB0F1" p-id="2453"></path><path d="M707.257635 250.988254h-52.122161c-8.820673 0-16.037588-7.216915-16.037588-16.037588V92.216132h-240.563822v142.734534c0 8.820673-7.216915 16.037588-16.037588 16.037588h-62.546593c-8.820673 0-16.037588-7.216915-16.037589-16.037588V35.282694c0-19.245106 16.037588-35.282694 35.282694-35.282694h348.817541c19.245106 0 35.282694 16.037588 35.282694 35.282694v199.667972c0 8.820673-7.216915 16.037588-16.037588 16.037588z m-36.084573-32.075176h20.046985V35.282694c0-1.603759-1.603759-3.207518-4.009397-3.207518H339.194988c-1.603759 0-3.207518 1.603759-3.207517 3.207518v183.630384h30.471417V76.178543c0-8.820673 7.216915-16.037588 16.037588-16.037588h272.638998c8.820673 0 16.037588 7.216915 16.037588 16.037588v142.734535zM946.217698 960.651527H82.593579c-8.820673 0-16.037588-7.216915-16.037588-16.037588s7.216915-16.037588 16.037588-16.037588H946.217698c8.820673 0 16.037588 7.216915 16.037588 16.037588s-7.216915 16.037588-16.037588 16.037588z" fill="" p-id="2454"></path><path d="M156.366484 234.950666h102.640564v772.209866H156.366484z" fill="#4376B6" p-id="2455"></path><path d="M259.007048 1024H156.366484c-8.820673 0-16.037588-7.216915-16.037588-16.037588V234.950666c0-8.820673 7.216915-16.037588 16.037588-16.037588h102.640564c8.820673 0 16.037588 7.216915 16.037588 16.037588v772.209866c0 9.622553-7.216915 16.839468-16.037588 16.839468z m-86.602976-32.075176h70.565388V250.988254h-70.565388v740.93657z" fill="" p-id="2456"></path><path d="M765.794832 234.950666h102.640563v772.209866H765.794832z" fill="#4376B6" p-id="2457"></path><path d="M868.435395 1024H765.794832c-8.820673 0-16.037588-7.216915-16.037588-16.037588V234.950666c0-8.820673 7.216915-16.037588 16.037588-16.037588h102.640563c8.820673 0 16.037588 7.216915 16.037589 16.037588v772.209866c0 9.622553-7.216915 16.839468-16.037589 16.839468z m-86.602975-32.075176h70.565387V250.988254h-70.565387v740.93657z" fill="" p-id="2458"></path></svg>
							<span>二手求购</span>
						</div>
					</nav>
					<div className={is_all == false ? '' : SecondHandCss.no}>
						<div className={SecondHandCss.lis}>
							<div className={SecondHandCss.second_typecss}>
								<div className={SecondHandCss.second_typecsslist}>
									{
										second_type.slice(0, 4).map((item, index) => {
											return <div key={item._id} onClick={() => { search(item._id, index) }} style={{ fontSize: '4vw' }}>
												<span className={index == type_ind ? SecondHandCss.ben : ''}>{item.name}</span>
											</div>
										})
									}</div>
								<div onClick={() => { setIsall(!is_all) }} style={{ display: 'flex', color: 'black' }}><svg t="1730201518985" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2486" width="40" height="40"><path d="M900.763 255.306H408.99a42.053 42.053 0 1 1 0-84.107h491.773a42.053 42.053 0 1 1 0 84.107z m0 298.747H408.99a42.053 42.053 0 1 1 0-84.106h491.773a42.053 42.053 0 1 1 0 84.106z m0 298.79H408.99a42.053 42.053 0 1 1 0-84.107h491.773a42.053 42.053 0 1 1 0 84.107zM236.57 255.306H123.237a42.053 42.053 0 1 1 0-84.107h113.334a42.053 42.053 0 1 1 0 84.107z m0 298.747H123.237a42.053 42.053 0 1 1 0-84.106h113.334a42.053 42.053 0 1 1 0 84.106z m0 298.79H123.237a42.053 42.053 0 1 1 0-84.107h113.334a42.053 42.053 0 1 1 0 84.107z" p-id="2487"></path></svg></div>
							</div>
						</div>
					</div>
					<div className={is_all ? '' : SecondHandCss.no}>
						<div className={SecondHandCss.lis}>
							<div className={SecondHandCss.second_typecss}>
								<div className={SecondHandCss.second_typecsslist}>
									{
										second_type.map((item, index) => {
											return <div key={item._id} onClick={() => { search(item._id, index) }} style={{ fontSize: '4vw' }} className={index == type_ind ? SecondHandCss.ben : ''}>
												{item.name}
											</div>
										})
									}</div>
								<div onClick={() => { setIsall(!is_all) }} style={{ display: 'flex', color: 'black' }}><svg t="1730201518985" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2486" width="25" height="25"><path d="M900.763 255.306H408.99a42.053 42.053 0 1 1 0-84.107h491.773a42.053 42.053 0 1 1 0 84.107z m0 298.747H408.99a42.053 42.053 0 1 1 0-84.106h491.773a42.053 42.053 0 1 1 0 84.106z m0 298.79H408.99a42.053 42.053 0 1 1 0-84.107h491.773a42.053 42.053 0 1 1 0 84.107zM236.57 255.306H123.237a42.053 42.053 0 1 1 0-84.107h113.334a42.053 42.053 0 1 1 0 84.107z m0 298.747H123.237a42.053 42.053 0 1 1 0-84.106h113.334a42.053 42.053 0 1 1 0 84.106z m0 298.79H123.237a42.053 42.053 0 1 1 0-84.107h113.334a42.053 42.053 0 1 1 0 84.107z" p-id="2487"></path></svg></div>
							</div>
						</div>
					</div>
					<nav>
						<div className={SecondHandCss.list_header}>
							<div className={SecondHandCss.list_headerone}>
								<span style={{ display: 'flex' }}><img src="img/liuxing.png" alt="" width='30' height='30' />
									<b style={{ fontSize: '20px' }}>最新发布</b>
								</span>
								<span style={{ fontSize: '20px' }}>更多</span>
							</div>
							{/*  */}
							{/*  */}
							{/* 瀑布流布局 */}
							<div className='tans'>
								{second_list.map((item, index) => {
									return <div key={item._id} className={`item item-${index + 1}`}>
										<img src={item.img[0]} alt="" onClick={() => { navigate(`/second_info?id=${item._id}`) }} />
										<p>
											<span>
												<span><b>商品名称{item.second_name}</b></span><br />
												<span className={item.is_sell ? SecondHandCss.is_chu : SecondHandCss.nois_chu}>{item.secondType_name.name}</span>
											</span><br />
											<span style={{ display: 'flex', justifyContent: 'space-between' }}>
												{/* <span><img src={item.img_head} alt=""/></span> */}
												<span>头像</span>
												<span>{item.ni_name}</span>
											</span><br />
											<span>
												出售商品描述:{item.content}
											</span>
										</p>
									</div>
								})}
							</div>
							{/* 瀑布流布局 */}
						</div>
					</nav>
				</div>
			</nav>
		</div>
	)
}
